<template>
    <div class="home-index">
        <el-container>
          <el-header :height="isContentShow?'190px':'40px'">
            <Header :isContentShow="isContentShow"></Header>
          </el-header>
          <el-main class="el-main">
            <router-view ></router-view>
          </el-main>
<!--          固定到最下方-->
          <el-footer>
              <Footer></Footer>
          </el-footer>
        </el-container>
    </div>
</template>

<script>
import Header from '../../components/Home/Header'
import Footer from '../../components/Home/Footer'
export default {
  name: 'index',
  data () {
    return {
      isContentShow: true
    }
  },
  components: {
    Header,
    Footer
  },
  methods: {
    scroll (next) {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop >= 149) {
        // 将元素的显示设置为false
        this.isContentShow = false
      } else {
        this.isContentShow = true
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.scroll)
  }
}
</script>

<style scoped lang="scss">
  .home-index {
    min-height: 100%;
  }
  /deep/ header  {
    padding: 0;
    border-bottom: 1px solid rgba(11, 193, 196, 0.71);
  }
  /deep/ main {
    padding: 0;
    overflow-y:hidden;
  }
</style>
